<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="topList.coverImgUrl" alt="" />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <div class="title">
          {{topList.copywriter}}
        </div>
        <div class="info">
          {{topList.description}}
        </div>
      </div>
      <img :src="creator.backgroundUrl" alt="" class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" :class="{active:tag=='全部'}" @click="tag='全部'">全部</span>
        <span class="item" :class="{active:tag=='欧美'}" @click="tag='欧美'">欧美</span>
        <span class="item" :class="{active:tag=='华语'}" @click="tag='华语'">华语</span>
        <span class="item" :class="{active:tag=='流行'}" @click="tag='流行'">流行</span>
        <span class="item" :class="{active:tag=='说唱'}" @click="tag='说唱'">说唱</span>
        <span class="item" :class="{active:tag=='摇滚'}" @click="tag='摇滚'">摇滚</span>
        <span class="item" :class="{active:tag=='民谣'}" @click="tag='民谣'">民谣</span>
        <span class="item" :class="{active:tag=='电子'}" @click="tag='电子'">电子</span>
        <span class="item" :class="{active:tag=='轻音乐'}" @click="tag='轻音乐'">轻音乐</span>
        <span class="item" :class="{active:tag=='影视原声'}" @click="tag='影视原声'">影视原声</span>
        <span class="item" :class="{active:tag=='ACG'}" @click="tag='ACG'">ACG</span>
        <span class="item" :class="{active:tag=='怀旧'}" @click="tag='怀旧'">怀旧</span>
        <span class="item" :class="{active:tag=='治愈'}" @click="tag='治愈'">治愈</span>
        <span class="item" :class="{active:tag=='旅行'}" @click="tag='旅行'">旅行</span>
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item,index) in playlists" :key="index" @click="toPlayList(item.id)">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount>100000?parseInt(item.playCount/10000)+'万':item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt="" />
              <span class="iconfont icon-play"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="10">
    </el-pagination>
  </div>
</template>

<script>
  import axios from 'axios'
  export default {
    name: 'recommend',
    data() {
      return {
        topList: {}, //精品歌单
        creator: {},  //精品歌单中一个对象元素
        playlists: [],  //全部歌单
        selectName: '',  //
        tag: '全部',  //默认歌单
        total: 0,  // 总条数
        page: 1  // 页码
      };
    },
    //监听分类标签的变化
    watch: {
      tag() {
        this.page=1  //每次切换标签的时候，总显示第一页
        this.playlist()  //切换标签时，自动请求全部歌单数据
        this.highquality()  //切换标签时，自动请求精品歌单数据
      }
    },
    //页面编译完成后自动加载请求的数据
    created() {
      this.playlist()
      this.highquality()
    },
    methods: {
      //点击分页触发，获得页码计算偏移量再次请求数据
      handleCurrentChange(val) {
        // console.log(`当前页: ${val}`);
        this.page = val
        this.playlist()
      },
      // 封装请求精品歌单方法
      highquality(){
        axios({
          url: 'https://autumnfish.cn/top/playlist/highquality',
          method: 'get',
          params: {
            limit: 1,
            cat: this.tag
          }
        }).then(res => {
          console.log('精品歌单', res)
          this.topList = res.data.playlists[0]
          this.creator = res.data.playlists[0].creator
        })
      },
      
      // 封装请求全部歌单方法
      playlist(){
        axios({
          url: 'https://autumnfish.cn/top/playlist/',
          method: 'get',
          params: {
            limit: 10,
            cat: this.tag,
            offset: (this.page-1)*10
          }
        }).then(res => {
          console.log('推荐歌单', res)
          this.playlists = res.data.playlists  //全部推荐歌单
          this.total = res.data.total  //获得歌单的数量
        })
      },
      // 歌单详情
      toPlayList(id){
        this.$router.push(`/playlist?q=${id}`)
      },
    }
  };
</script>

<style>

</style>
